import React, { Component } from 'react'

export default class ControlCom extends Component {
  //1. 声明状态
  state = {
    user: '',
    pass: '',
    repass: ''
  }

  //save 方法
  save = e => {
    //获取事件源 input 元素的 name 属性
    let name = e.target.name;// e.target.getAttribute('xxx');
    //更新状态
    this.setState({
      [name]: e.target.value
    })
  }

  //声明 login 方法
  login = (e) => {
    e.preventDefault();
    //输出表单元素的值
    console.log(`用户名: ${this.state.user} 密码: ${this.state.pass}`)
  }

  reset = e => {
    e.preventDefault();
    //更新状态
    this.setState({
      user: '',
      pass: ''
    });
  }

  render() {
    return (
      <form>
        <h2>用户注册</h2>
        <hr />
        {/* 2. 使用状态值来作为 input 元素的 value 值  受控组件*/}
        用户名: <input name="user"  onChange={this.save} type="text" value={this.state.user} /><br />
        密码: <input name="pass"  onChange={this.save} type="password" value={this.state.pass} /><br />
        确认密码: <input name="repass"  onChange={this.save} type="password" value={this.state.repass} /><br />
        <hr />
        <button onClick={this.login}>注册</button>
        <button onClick={this.reset}>重置</button>
      </form>
    )
  }
}
